<template>
  <div>
    <article class="comment-item" v-for='(item ,index) in commentData'>
      <a class="pull-left thumb-sm">
        <img v-lazy="item.user.avatarUrl" class="img-circle">
      </a>
      <section class="comment-body m-b comment-bodys">
        <header>
          <a><strong>{{item.user.nickname}}</strong></a>
          <span class="text lick-click">
                        <i class="fa fa-thumbs-up" :class="like&&commentId==item.commentId? 'text-danger':'text-success-lt'" @click='likeComment(item.liked,item.commentId)'></i>
          {{item.likedCount}}
                      </span>
          <span class="text-muted text-xs block m-t-xs">
                            {{item.time}}
                          </span>
        </header>
        <div class="m-t-sm">
          {{item.content}}
        </div>
        <article class="comment-item comment-reply" v-if="item.beReplied" v-for='info in item.beReplied'>
          <a class="pull-left thumb-sm">
            <img v-lazy="info.user.avatarUrl" class="img-circle">
          </a>
          <section class="comment-body">
            <header>
              <a><strong>{{info.user.nickname}}</strong></a>
            </header>
            <div class="m-t-sm">
              {{info.content}}
            </div>
          </section>
        </article>
      </section>

    </article>
  </div>
</template>

<script>
  import Vue from 'vue';

  export default {
    data() {
      return {
        like:false,
        commentId:null,
      }
    },
    created() {

    },
    props: {
      commentData: {
        type: Array,
        default: null
      }
    },
    methods: {
      likeComment(item, cid) {
        var t;
        var vm=this;
        vm.like=item;
        vm.commentId=cid;
        item? t=0:t=1;
        let lickUrl=`/comment/like?id=`+ this.commentData.id+`&cid=`+cid+`&t=`+t+`&type=0`;
        console.log(lickUrl)
        this.$http.get(lickUrl).then((res)=>{

            vm.like=!vm.like;

        })

      }
    }
  }
</script>
<style scoped>
  .lick-click {
    float: right;
    margin-right: 15px;
  }
  .comment-bodys {
    border: 1px solid rgba(195, 165, 165, 0.5);
    border-radius: 3px;
    padding: 5px;
  }
</style>
